<template>
    <div>
        <div>
            <van-nav-bar
            title="团队"
            left-text="返回"
            left-arrow
            class="header"
            @click-left="$router.back(-1)"
            />
        </div>
        <div class="wrapper">
            <swiper :options="swiperOption" v-if="showSwiper">
                <swiper-slide v-for="item of Imglist" :key="item.imgid">
                <img class="swiper-img" :src="item.imgUrl" />
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <div class="Cost">
           <span class="cost-info"><label>积累班费&nbsp;&nbsp;<a>222</a></label>&nbsp; | &nbsp;<label>经费余额&nbsp;&nbsp;<a>102</a></label> </span>
        </div>
        <!-- 详情信息列表循环 -->
      <publish :type="2"></publish>
    </div>
</template>

<script>
import Publish from '@/pages/publish/publish.vue'
export default {
    name: 'TeamIndex',
      components: {
 Publish
  },
    props: {
        list: Array
    },
    data () {
        return {
        swiperOption: {
            pagination: '.swiper-pagination',
            loop: true,
            autoplay: 5000,
        },
        Imglist: [
            {imgid:'0',imgUrl:'https://imgs.qunarzz.com/p/tts3/1808/bd/3935901d15a7c102.jpg_750x440_91925045.jpg'},
            {imgid:'1',imgUrl:'https://imgs.qunarzz.com/p/tts0/1808/69/3e35ac56ca1c0e02.jpg_750x440_147e1740.jpg'},
            {imgid:'2',imgUrl:'https://imgs.qunarzz.com/p/tts3/1808/bd/3935901d15a7c102.jpg_750x440_91925045.jpg'},
        ],
        headerImg: "https://imgs.qunarzz.com/p/tts0/1808/69/3e35ac56ca1c0e02.jpg_750x440_147e1740.jpg",


        }
    },
    computed: {
        showSwiper () {
        return this.Imglist.length
        }
    }
}
</script>

<style lang="">
.header{background: #259e7b;color: white}
.van-icon-arrow::before,.van-nav-bar__text{color: white}
.swiper-container-horizontal{height:200px;}
.wrapper .img{width:100%;}
.Cost{text-align:center;margin-top:20px;}
.cost-info{ display: inline-block;padding:10px 30px;border-radius: 20px; background: #94CFBE; color:#ffffff}
.cost-info a{color:#EBF42A}

/*** 详情列表 **/
.Infomation {padding: 10px;}
.item-header, .item-remark, .item-img  {display:flex;}
.item-header .item-header-logo{width:60px; height:60px; }
.item-header .item-header-logo img{width:60px; height:60px;border-radius: 50%;}
.item-header-namedata {padding: 8px 15px;}
.item-header-namedata .name{ font-size:13px; font-weight: bold;}
.item-header-namedata .data{margin-top: 5px; color: #B6B6B6;}

.item-desc{padding: 10px 0;font-size: 14px;}
.info-item  {margin-top:25px;}
.info-item .item-img .item-imglist{width:33%; margin: 0 2px;}
.info-item .item-img .item-imglist img{max-width:100%;}
.item-remark{float: right;padding:10px; font-size: 14px;color: #B6B6B6;}
.item-remark .van-icon{ margin-right:5px;}
</style>
